<template>
  <div class="base_table">
    <ux-grid v-bind="$attrs" ref="uTable" :height="tableHeightFn()" :stripe="allOption.stripe" size="mini" v-loading="loading" @sort-change="sortChange" :edit-config="{ trigger: 'click', mode: 'cell' }">
      <ux-table-column v-if="allOption.selection" type="checkbox" width="40" align="center" fixed="left"></ux-table-column>
      <template v-for="item in allOption.column">
        <ux-table-column v-if="hidColumnData.indexOf(item.prop) === -1" :align="item.align || 'center'" :sortable="item.sortable" :key="item.id" resizable :show-overflow="!item.linkType" :field="item.prop" :edit-render="item.listEdit" :title="item.label" :fixed="item.fixed ? 'left' : ''" :min-width="item.width || 80">
          <template v-if="item.listEdit" v-slot:edit="scope">
            <el-select v-if="item.dicData.length > 0" v-model="scope.row[item.prop]" @change="changeData({ [item.prop]: scope.row[item.prop], ID: scope.row.ID, DATA_VER: scope.row.DATA_VER })">
              <el-option v-for="(item, index) in item.dicData" :key="index" :label="item.label" :value="item.value"></el-option>
            </el-select>
            <el-input v-else size="mini" :type="item.type" v-model="scope.row[item.prop]" @change="changeData({ [item.prop]: scope.row[item.prop], ID: scope.row.ID, DATA_VER: scope.row.DATA_VER })"></el-input>
          </template>
          <template v-slot="{ row }">
            <slot :name="item.prop" :row="row">
              <template v-if="item.type == 'switch' && item.value" :name="item.prop">
                <el-switch v-model="row[item.prop]" :disabled="!allOption.editBtn && !item.editSwitch" :active-value="item.dicData[0].value" :inactive-value="item.dicData[1].value" :active-color="item.activeColor ? item.activeColor : filterArr(item.dicData, 'value', row[item.prop], 'color')" :inactive-color="item.inactiveColor ? item.inactiveColor : filterArr(item.dicData, 'value', row[item.prop], 'color')" @change="switchClick(row, item.prop, row[item.prop])"></el-switch>
              </template>
              <template v-else-if="item.type == 'color'" :name="item.prop">
                <div :style="'width:28px;height:28px;border-radius:6px;margin:auto;display:block;background:' + row[item.prop]"></div>
              </template>
              <template v-else-if="item.type == 'icon'" :name="item.prop">
                <i :class="row[item.prop]" class="fs-xl"></i>
              </template>
              <template v-else-if="item.type == 'code'" :name="item.prop">
                <span :class="{ url: !!item.linkType }" @click="urlClick(item, row)" v-html="row[item.prop]"></span>
              </template>
              <template v-else-if="item.dicData.length > 0" :name="item.prop">
                <span v-if="item.urlType == '2' || item.urlType == '7'" :style="{ color: filterArrs(item.dicData, 'value', row[item.prop], 'color') }" :class="{ url: !!item.linkType }" @click="urlClick(item, row)" v-text="filterArrs(item.dicData, 'value', row[item.prop], 'label')"></span>
                <i v-else :style="{ color: filterArrs(item.dicData, 'value', row[item.prop], 'color') }" :class="filterArrs(item.dicData, 'value', row[item.prop], 'icon')"></i>
              </template>
              <template v-else-if="item.type == 'selectDown' || item.type == 'tableSelect' || item.type == 'treeSelect'" :name="item.prop">
                <span :class="{ url: !!item.linkType }" @click="urlClick(item, row)" v-text="row[`$${item.prop}`] || row[item.prop]"></span>
              </template>
              <template v-else-if="item.type == 'datetime' || item.type == 'date'" :name="item.prop">
                <span :class="{ url: !!item.linkType }" @click="urlClick(item, row)" v-text="dateFormat(row[item.prop], item.format)"></span>
              </template>
              <template v-else-if="item.type == 'mapSelect'" :name="item.prop">
                <span :class="{ url: !!item.linkType }" @click="urlClick(item, row)" v-text="row[item.prop]"></span>
              </template>
              <template v-else :name="item.prop">
                <span :class="{ url: !!item.linkType }" @click="urlClick(item, row)" v-text="row[item.prop]"></span>
              </template>
            </slot>
          </template>
        </ux-table-column>
      </template>
      <ux-table-column v-if="allOption.menu" :align="allOption.menuAlign || 'center'" :width="allOption.menuWidth" title="操作" resizable fixed="right">
        <template slot-scope="scope">
          <el-button v-if="allOption.viewBtn" icon="el-icon-view" type="text" size="mini" @click="viewClick(scope.row)">查看</el-button>
          <el-button v-if="allOption.editBtn" icon="el-icon-edit" type="text" size="mini" @click="editClick(scope.row)">{{ allOption.editBtnName || '修改' }}</el-button>
          <el-button v-if="allOption.delBtn" icon="el-icon-delete" type="text" size="mini" @click="rowDel(scope.row)">删除</el-button>
          <el-button v-if="allOption.copyBtn" icon="el-icon-document-copy" type="text" size="mini" @click="rowCopy(scope.row)">复制</el-button>
          <el-button v-if="allOption.viewoplog" icon="el-icon-view" type="text" size="mini" @click="rowLog(scope.row)">操作日志</el-button>
          <el-button v-for="item in scope.row.OK_BUTTON" :key="item.id" type="text" :icon="item.icon" size="mini" @click="clickButton(item, scope.row)">{{ item.btnName }}</el-button>
          <slot name="menuRight" :row="scope.row"></slot>
        </template>
      </ux-table-column>
    </ux-grid>
  </div>
</template>

<script>
import { routes } from '@/testData/table.js';

export default {
  props: {
    option: { type: Object, default() { return {}; }, },
  },
  data() {
    return {
      loading: false,
      route: routes.data.records,
      hidColumnData: [],//隐藏的列数据
      data: routes.data.records || [],//列表数据
    };
  },
  mounted() {
    console.log(document.getElementById('breadcrumb_wrap'), 'assd')
  },
  computed: {
    allOption() {
      console.log(this.option, 'options')
      return this.option
    }
  },
  methods: {
    async sortChange(val) {
      console.log(val, 'sort-change')
      !!val.order && this.sortOrder == val.order ? this.$refs.uTable.clearSort() : this.$refs.uTable.sort(val.prop, this.sortOrder);
      this.sort = { [`${val.order}s`]: val.prop };
      await this.onLoad();
      this.sortOrder = val.order;
      this.$refs.uTable.sort(val.prop, val.order);
    },
    // 获取表格最大高度
    tableHeightFn() {
      let height = document.getElementById('breadcrumb_wrap');
      // console.log(height,'.clientHeight.clientHeight')
      if (height) {

        if (height.clientHeight >= 558) {
          console.log(height.clientHeight, 'height')
          return height.clientHeight - 208;
        } else {
          return 350;
        }
      }
    },
  },
};
</script>

<style scoped lang="scss"></style>
